<template>
  <div class="release">
    <van-nav-bar
      left-arrow
      title="发布"
      @click-left="$router.go(-1)"
    />
    <van-field
      v-model="title"
      rows="1"
      autosize
      label="标题"
      type="textarea"
      placeholder="请输入标题"
    />
    <van-field
      v-model="content"
      rows="3"
      autosize
      label="发布内容"
      type="textarea"
      maxlength="100"
      placeholder="请输入内容"
      show-word-limit
    />
    <p class="img-title">图片</p>
    <div class="upload">
      <van-uploader
        v-model="fileList"
        multiple
      />
    </div>
    <van-button
      type="primary"
      size="large"
      class="btn"
    >发布</van-button>
    <div
      class="list"
      v-for="item in 3"
    >
      <h2 class="title">
        <img src="../../image/meinv.jpg">
        石家庄高端设计中心
      </h2>
      <p class="jrps">今日拍摄/手机图，期待新案例</p>
      <div class="img-list">
        <img src="../../image/meinv.jpg">
        <img src="../../image/meinv.jpg">
        <img src="../../image/meinv.jpg">
        <img src="../../image/meinv.jpg">
        <img src="../../image/meinv.jpg">
        <img src="../../image/meinv.jpg">
      </div>
      <div class="tag">
        <p>石家庄同城</p>
        <p>#设计图纸#</p>
      </div>
      <div class="bottom">
        <p>
          <img src="../../image/pinglun.png">
          <span>36</span>
        </p>
        <p>
          <img src="../../image/zan.png">
          <span>36</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Release',
  data () {
    return {
      title: '', // 发布标题
      content: '', // 发布内容
      fileList: [] // 上传图片
    }
  }
}
</script>

<style scoped>
.bottom span {
  color: rgba(89, 89, 89, 100);
  font-size: 14px;
  text-align: left;
  font-family: PingFangSC-regular;
}

.bottom {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.bottom p {
  display: flex;
  align-items: center;
  margin-right: 7vw;
}

.bottom img {
  width: 19px;
  height: 19px;
  margin-right: 7px;
}

.tag {
  display: flex;
  padding: 10px 0;
}

.tag p {
  width: 23vw;
  height: 7vw;
  line-height: 20px;
  border-radius: 15px;
  background-color: rgba(245, 247, 251, 100);
  color: rgba(16, 16, 16, 100);
  font-size: 14px;
  text-align: center;
  font-family: Arial;
  border: 1px solid rgba(255, 255, 255, 100);
  line-height: 7vw;
}

.img-list {
  display: flex;
  flex-wrap: wrap;
}

.img-list img {
  width: 29vw;
  height: 29vw;
  margin-right: 8px;
  margin-top: 9px;
}

.jrps {
  color: rgba(16, 16, 16, 100);
  font-size: 14px;
  text-align: left;
  font-family: SourceHanSansSC-regular;
  margin-left: 8vw;
  margin-top: 15px;
}

.title {
  display: flex;
  align-items: center;
  color: rgba(16, 16, 16, 100);
  font-size: 16px;
  text-align: left;
  font-family: SourceHanSansSC-bold;
}

.title img {
  width: 9vw;
  height: 9vw;
  border-radius: 50%;
  margin-right: 10px;
}

.list {
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  padding: 10px;
  background-color: #fff;
  margin-top: 10px;
}

.btn {
  margin-top: 20px;
  margin-bottom: 10px;
  width: 80%;
}

.img-title {
  font-size: 14px;
  color: #646566;
  box-sizing: border-box;
  text-align: left;
  margin: 0;
  padding: 10px 16px;
  color: #646566;
  font-weight: normal;
  font-size: 14px;
  line-height: 16px;
}

.upload {
  background-color: #fff;
  box-sizing: border-box;
  padding: 10px;
  padding-bottom: 0;
  text-align: left;
}

.van-field {
  margin-top: 10px;
}

.release {
  /* height: 100vh; */
  overflow: hidden;
  background-color: #f7f8fa;
  padding-bottom: 10px;
  box-sizing: border-box;
}
</style>